<template>
    <div class="openUp-view">
        <el-dialog :title="titleText" @open="openView"  :visible.sync="dialogFormVisible" width="10%" :show-close="showimg" :close-on-click-modal="showimg">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <div class="addForm-form-input">
                    <div class="addForm-form-input-title"><span>*</span>选择城市：</div>
                    <div>
                            <el-select class="openUp-view-option" v-model="value1" placeholder="省">
                                <el-option

                                        v-for="item in citylist"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name">
                                </el-option>
                            </el-select>
                            <el-select class="openUp-view-option" v-model="value2" placeholder="市">
                                <el-option
                                        v-for="item in citylist1"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name">
                                </el-option>
                            </el-select>

                    </div>
                    <el-form-item  prop="value3">
                        <div style="display: flex; height: 35px">
                            <div class="addForm-form-input-title openUp-view-option1-margin"><span>*</span>选择楼盘：</div>
                                <div>
                                    <el-select
                                            v-model="ruleForm.value3"
                                            multiple
                                            collapse-tags
                                            style="margin-left: 20px;"
                                            placeholder="请选择">
                                        <el-option
                                                v-for="item in list"
                                                :key="item.linkerId"
                                                :label="item.houseName"
                                                :value="item.linkerId">
                                        </el-option>
                                    </el-select>
                                </div>
                        </div>
                    </el-form-item>
                </div>
                <el-form-item  prop="value4">
                <div class="addForm-form-input">
                    <div class="addForm-form-input-title">到期时间：</div>
                        <div>
                            <el-date-picker
                                    class="openUp-view-option1"
                                    v-model="ruleForm.value4"
                                    type="date"
                                    placeholder="请选择">
                            </el-date-picker>
                        </div>
                </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel-button"  @click="closeForm('ruleForm')" >取 消</el-button>
                <el-button class="sure-button" type="primary" @click="addstruct('ruleForm')">开 通</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "openUp",
        props:{
            seeDetails:{
                type:Object,
            },
            dialogFormVisible: {
                type: Boolean
            },
        },
        watch: {
            seeDetails:{
                handler(newValue, oldValue) {
                    if (newValue) {
                        for (let props in newValue) {
                            this.forms[props] = newValue[props];
                        }
                    }
                }
            },
            value1(){
                console.log(this.value1,"}}}}}}}}}}")
                this.value2=""
                this.ruleForm.value3=""
                this.getlist()
                if(this.value1){
                    let _this = this;
                    let params={
                        pid:this.value1,
                    }
                    _this.Api.setting.cityList(params).then((data)=>{
                        console.log("kkkkkkkkkkkkkkkkkkk",data)
                        _this.citylist1=data.data;
                    })

                }

            },
            value2(){
                console.log(this.value1,"}}}}}}}}}}")
                this.ruleForm.value3=""
                this.getlist()

            },
        },
        data(){
            return{
                titleText:"批量开通楼盘",
                resource:0,
                treeList:[],
                showimg:false,
                value1:"",
                value2:"",
                ruleForm:{
                    value3:"",
                    value4:"",
                },
                rules: {
                   value3: [
                        { required: true, message: '请先选择开通楼盘', trigger: 'blur' },
                    ],},
                inputvalue:[],
                citylist:[],
                citylist1:[],
                list: [],
                value: '',
            }
        },
        mounted(){

        },
        methods: {
            openView(){
                this.getlist()
                this.getcity()
            },
            getcity(){
                let _this = this;
                let params={
                    pid:0,
                }
                _this.Api.setting.cityList(params).then((data)=>{
                    console.log("kkkkkkkkkkkkkkkkkkk",data)
                    _this.citylist=data.data;
                })
            },
            handleChange(e) {
                let a = e.length;
            },
            closeForm() {
                console.log("aaaaaaa")
                this.$emit("close");
            },
            addstruct(formName){
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

                let params={
                    name:this.input1,//组织名称
                    type:this.resource,//类型
                    parentId:this.inputvalue,//上级组织id
                    linkman:this.input2,//联系人
                    linkTel:this.input3,//联系电话
                    companyAddress:this.input4,//公司地址
                    remark:this.input5,//备注
                }
                console.log(params,">>>>>>>>>>>>>")
                _this.Api.setting.addStruct(params).then((data)=>{
                    console.log("成功",data)
                    this.closeForm()
                })
            },
            getlist(){
                let _this = this;
                let params={
                    distributorId:123,
                    province:this.value1,
                    city:this.value2,
                }
                _this.Api.setting.BathHouseList(params).then((data)=>{
                    _this.list=data.data
                })
            }
        }
    }
</script>
<style>
    .openUp-view .el-dialog--small {
        width:942px;
    }
    .openUp-view .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        padding: 7px 0px 0px 30px;
        box-sizing: border-box;
    }
    .openUp-view  .el-dialog__header{
        height: 50px;
        padding: 10px ;
        text-align: left;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:24px;

    }
    .openUp-view .el-dialog__body{
        border-top: 1px #E9E9E9 solid;
        border-bottom: 1px #E9E9E9 solid;
    }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
    .openUp-view-option{
        width:160px;
        height:32px;
        background:rgba(255,255,255,1);
        margin-right: 8px;
    }
     .openUp-view-option1{
         width:200px;
         height:32px;
         background:rgba(255,255,255,1);
    }
     .openUp-view-option1-margin{
        margin-left: 24px;
     }
    .addForm-form-resource{
        display: flex;
        margin-bottom: 12px;
        justify-content: center;
    }
    .addForm-form-resource-radio{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.65);
        line-height:22px;
        align-self: center;
        margin-right: 5px;
    }
    .addForm-form-input{
        display: flex;
        margin-top: 24px;
    }
    .addForm-form-input-title{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        align-self: center;
        min-width: 70px;
        text-align: right;
        span{
            color: #FF0606;
            margin-bottom: -3px;
        }
    }
    .addForm-form-input-input{
        width:375px;
        height:32px;
        background:rgba(255,255,255,1);
        border-radius:4px;
    }
    .cancel-button{
        padding: 0px;
        width:78px;
        height:32px;
        line-height:32px;
        border-radius:4px;
        border:1px #D9D9D9 solid;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.25);
        text-align: center;
    }
    .sure-button{
        padding: 0px;
        width:78px;
        height:32px;
        line-height:32px;
        border-radius:4px;
        background:rgba(24,144,255,1);
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        text-align: center;
    }
</style>